import {deleteMeet, getMeetList} from '../../../api/admin/meet.js'
import {useEffect, useState} from "react";
import {Table, Button, Badge, Pagination, Form, Row, Col, Input, DatePicker, Popconfirm, message} from 'antd';
import dayjs from 'dayjs';
import './meet.less'
import {useNavigate} from "react-router-dom";

const Meet = () => {
    const [form] = Form.useForm();
    const {RangePicker} = DatePicker;
    const [list, setList] = useState([])
    const [pageSize, setPageSize] = useState(10)
    const [pageNum, setPageNum] = useState(1)
    const [total, setTotal] = useState(0)


    let [createdStartTime, setCreatedStartTime] = useState('')
    let [createdEndTime, setCreatedEndTime] = useState('')

    const onShowSizeChange = (current, pageSize) => {
        setPageNum(1)
        setPageSize(pageSize)
        getList(1, pageSize)
    }
    const onChange = (pageNum, pageSize) => {
        setPageNum(pageNum)
        getList(pageNum, pageSize)

    };

    useEffect(() => {
        getList(1, 10)
    }, [])

    const getList = (pageNum, pageSize) => {
        console.log(createdStartTime, createdEndTime);
        console.log(pageNum, 'pageNum')
        console.log(pageSize, 'pageSize')
        const list = {
            name: form.getFieldValue('name'),
            capacity: form.getFieldValue('capacity'),
            equipment: form.getFieldValue('equipment'),
            pageNum: pageNum,
            pageSize: pageSize
        }
        getMeetList(list)
            .then(res => {
                setList(res.data.meeting)
                setPageSize(res.data.pageSize)
                setPageNum(res.data.pageNum)
                setTotal(res.data.total)
            })
            .catch(err => {
                console.log(err, 'err');
            })
    }

    const deleteMeetList = (id) => {
        console.log(id, 'id')
        deleteMeet(id)
            .then(res => {
                const {code} = res
                if (code === 200) {
                    getList(1, pageSize)
                    message.success('删除成功');
                } else {
                    message.error('删除失败');
                }
            })
            .catch(err => {
                message.error(err);
            })
    }

    const columns = [
        {
            title: '序号',
            align: 'center',
            width: 60,
            render: (text, record, index) => {
                return <>{index + 1}</>
            },
        },
        {
            title: '会议室名字',
            dataIndex: 'name',
            key: 'name',
            width: 100,
            render: (text, record) => <a onClick={() => navigate(`/meet/detail`, {state: {id: record.id}})}>{text}</a>,
        },
        {
            title: '会议室容量',
            dataIndex: 'capacity',
            key: 'capacity',
            width: 160,
        },
        {
            title: '会议室位置',
            dataIndex: 'location',
            key: 'location',
            width: 160,
        },
        {
            title: '设备',
            dataIndex: 'equipment',
            key: 'equipment',
            width: 200,
        },
        {
            title: '描述',
            dataIndex: 'description',
            key: 'description',
            width: 200,
        },
        {
            title: '状态',
            dataIndex: 'isBooked',
            key: 'isBooked',
            width: 80,
            render: (text) => (
                <span>

          {text && <Badge status="success" text="已预约"/>}
                    {!text && <Badge status="default" text="未预约"/>}
        </span>
            )
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 150,
            render: (text) => (
                <span>
          {dayjs(text).format("YYYY-MM-DD HH:mm:ss")}
        </span>
            )
        },
        {
            title: '操作',
            fixed: 'right',
            width: 150,
            render: (text, record) => (
                <span>
          <Button type="link" onClick={() => navigate(`/meet/detail`, {state: {id: record.id}})}>详情</Button>
          <Button type="link" onClick={() => navigate(`/meet/update`, {state: {id: record.id}})}>修改</Button>
                    <Popconfirm
                        title="是否要删除这个会议室?"
                        onConfirm={() => deleteMeetList(record.id)}
                        okText="确定"
                        cancelText="取消"
                    >
                       <Button type="link">删除</Button>
                      </Popconfirm>
        </span>
            )
        },
    ];

    const formItemLayout = {
        labelCol: {
            sm: {span: 6},
        },
        wrapperCol: {
            sm: {span: 18},
        },
    }

    const inquire = () => {
        getList(1, pageSize)
    }
    const reset = () => {
        form.resetFields();
        getList(1, 10)
    }

    const onTimeChange = (date, dateString) => {
        setCreatedStartTime(dateString[0])
        setCreatedEndTime(dateString[1])
    }

    const navigate = useNavigate();
    const addLink = () => {
        navigate('/meet/add')
    }


    return (
        <>
            <div className='filtrate'>
                <Form {...formItemLayout} form={form}>
                    <Row gutter={36}>
                        <Col span={8}>
                            <Form.Item
                                name="name"
                                label="会议室名称"
                            >
                                <Input placeholder="请输入会议室名称"/>
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                name="capacity"
                                label="会议室容量"
                            >
                                <Input placeholder="请输入会议室容量"/>
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                name="equipment"
                                label="会议室设备"
                            >
                                <Input placeholder="请输入会议室设备"/>
                            </Form.Item>
                        </Col>


                        <Col span={8}>
                            <Form.Item
                                name="createdTime"
                                label="创建时间"
                            >
                                <RangePicker onChange={onTimeChange} style={{width: '100%'}} format='YYYY-MM-DD'
                                             placeholder="创建日期"/>
                            </Form.Item>
                        </Col>

                        <Col span={16}>
                            <div className='operation'>
                                <Button style={{marginRight: '10px'}} onClick={reset}>重置</Button>
                                <Button type="primary" onClick={inquire}>查询</Button>
                            </div>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div className='add'>
                <Button type="primary" onClick={addLink}>新增</Button>
            </div>
            <div>
                <div className='table'>
                    <Table rowKey='id' scroll={{x: 2000}} columns={columns} dataSource={list}
                           pagination={false}/>
                </div>

                <div className='pagination'>
                    <Pagination
                        showSizeChanger
                        onShowSizeChange={onShowSizeChange}
                        onChange={onChange}
                        showTotal={(total) => `共${total}条记录 第${pageNum}/${Math.ceil(total / pageSize)}页`}
                        total={total}
                        current={pageNum}
                        pageSize={pageSize}
                    />
                </div>
            </div>
        </>
    )
}

export default Meet